<!DOCTYPE html>
<html lang=en style="font-size: 37.5px">

<head>
    <meta charset=utf-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/gh/eduardolundgren/tracking.js/build/tracking-min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/eduardolundgren/tracking.js/build/data/face-min.js"></script>

</head>
<style>
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        overflow: hidden;
    }

    .iframe-body {
        position: absolute;
    }

    .f {
        width: 80%;
        display: flex;
        margin-left: 10%;
        padding-left: 2%;
        position: absolute;
        top: 7%;
        z-index: 3;
        background: rgb(255 255 255 / 90%);
        color: #fff;
        font-size: 15px;
    }

    #myChart {
        width: 100%;
    }

    .page-title {
        font-size: 18px;
        color: #999;
        text-align: center;
    }

    .myChart-body {
        width: 90%;
        padding: 50px;
    }
</style>

<body>
    <iframe class="iframe-body" width='100%' height='100%' src="http://www.jiaxingshihe.com/" frameborder="0"
        scrolling="no"></iframe>
    <div id="app">
        <audio ref="refAudio" src="./img/13629.mp3" id="music"></audio>
        <button style="position: absolute;" @click="testgetHtml(0)">0000</button>
        <button style="position: absolute;margin-left: 100px;" @click="testgetHtml(1)">1111</button>
        <button style="position: absolute;margin-left: 200px;" @click="testgetHtml(2)">Greet</button>
        <div class="f" v-show='pageData.type == 1 || pageData.type == 2'>
            <div class="myChart-body">
                <p class="page-title">{{pageData.text}}</p>
                <div v-show='pageData.type == 1' id="myChart" :style="{height: '540px'}"></div>
            </div>
        </div>
    </div>
</body>
<script src="/javascripts/vue.min.js" type="text/javascript"></script>
<script src="/javascripts/vue-resource.min.js" type="text/javascript"></script>
<script src='/javascripts/socket/socket.io.min.js'></script>
<script src='/javascripts/echarts.js'></script>
<script>
    const app = new Vue({
        el: "#app",
        data() {
            Vue.prototype.$echarts = echarts;
            return {
                isUserSuccess: 0, //0:中间状态 1：用户已对应 2：用户未对应
                socket: io.connect("http://localhost:3000"),
                pageData: {},
                music:null
            }
        },
        mounted() {
            this.getSocket();
        },
        methods: {
            // 向百度请求用户牵手
            getSocket(url) {
                let that = this;
                this.socket.on('news', function (data) {
                    that.pageData = data;
                    switch (data.type) {
                        case '1':
                            console.log(data)
                            that.drawLine(data.lineData);
                            break;
                        case '2':
                            break;
                        default:
                            that.$refs.refAudio.src = '../img/13629.mp3';
                            that.$refs.refAudio.onloadedmetadata = e => {
                                that.music = that.$refs.refAudio;
                                that.$refs.refAudio.play();
                            }
                            break;
                    }
                });
            },
            testgetHtml(t) {
                Vue.http.post('/getHtml', {
                    "data": {
                        "db101.CJ-WANO-HY1-1": 100,
                        "db101.JT-LJSWDL": 196.9001234342
                    },
                    "voicePath": "D:/upload/202011231313496311.mp3",
                    "text": "截止到2020-11-12,集团内所有核电机组累计发电量为889.12GWH",
                    "type": t, // 0:无弹框 1：柱状图，2：文本
                    "url": "https://www.cnblogs.com/lirystar/p/9621843.html"
                }, {
                    emulateJSON: true,
                    headers: {
                        'Content-Type': 'x-www-from-urlencoded'
                    }
                }).then(function (res) {
                    // window.location.href = "/user";

                }, function (e) {
                    console.log(e)
                });
            },
            drawLine(lineData) {
                // var i=0;
                // 基于准备好的dom，初始化echarts实例
                let mCe = document.getElementById("myChart");
                mCe.style.width = document.documentElement.clientWidth / 1.4 + 'px';
                let myChart = this.$echarts.init(mCe);
                // 绘制图表
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '30%']
                    },
                    visualMap: {
                        type: 'piecewise',
                        show: false,
                        dimension: 0,
                        seriesIndex: 0,
                        pieces: [{
                            gt: 1,
                            lt: 3,
                            color: 'rgba(0, 180, 0, 0.5)'
                        }, {
                            gt: 5,
                            lt: 7,
                            color: 'rgba(0, 180, 0, 0.5)'
                        }]
                    },
                    series: [{
                        type: 'line',
                        smooth: 0.3,
                        symbol: 'none',
                        lineStyle: {
                            color: 'green',
                            width: 5
                        },
                        areaStyle: {},
                        data: lineData
                    }]
                })
            },
            play() {
               
                this.music.play();
            },
            getUserMedia(constrains, success, error) {
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    //最新标准API
                    navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
                } else if (navigator.webkitGetUserMedia) {
                    //webkit内核浏览器
                    navigator.webkitGetUserMedia(constrains).then(success).catch(error);
                } else if (navigator.mozGetUserMedia) {
                    //Firefox浏览器
                    navagator.mozGetUserMedia(constrains).then(success).catch(error);
                } else if (navigator.getUserMedia) {
                    //旧版API
                    navigator.getUserMedia(constrains).then(success).catch(error);
                } else {
                    this.scanTip = "你的浏览器不支持访问用户媒体设备"
                }
            }
        }
    })
</script>

</html>